<%-- 
    Document   : statistics3
    Created on : Apr 1, 2011, 10:29:44 PM
    Author     : Nguyen Viet Dung
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%
int year = 2011;
String status = "=5";
try {
    year = Integer.parseInt(request.getParameter("ddlYear"));
    status = request.getParameter("ddlStatus");
} catch(Exception ex) { }
%>
<div class="section table_section">
    <!--[if !IE]>start title wrapper<![endif]-->
    <div class="title_wrapper">
        <h2>
        <form name="frmYear" action="?option=statistics&action=percentService" method="post" >
            Services Market Shares In Year
         :<select name="ddlYear" onchange="this.form.submit()">
            <option value="2010">2010</option>
            <option value="2011" selected>2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            </select>
         Based On :
         <select name="ddlStatus" onchange="this.form.submit()">
             <option value=">0" >All the bills</option>
             <option value=">1" >All the bills have been accpect onwards</option>
             <option value=">2" >All the bills have been paid onwards</option>
             <option value=">3" >All the bills have been on-going onwards</option>
             <option value="=5" selected>All the bills have been Completed</option>
             <option value="=1" >All the bills have been Reject</option>
            </select>
        </form>
        </h2>
        <!--[if !IE]>start section menu<![endif]-->
        <ul class="section_menu">
            <li></li>
            <li><a href="javascript:window.location.href='?option=statistics';" class="active"><span><span>GO BACK</span></span></a></li>
            <li></li>
            <li></li>
        </ul>
        <!--[if !IE]>end section menu<![endif]-->

        <span class="title_wrapper_left"></span>
        <span class="title_wrapper_right"></span>
    </div>
    <!--[if !IE]>end title wrapper<![endif]-->

    <script>document.frmYear.ddlYear.value = <%=year %>; document.frmYear.ddlStatus.value = '<%=status %>';</script>
    <!--[if !IE]>start section content<![endif]-->
    <div class="section_content">
        <!--[if !IE]>start section content top<![endif]-->
        <div class="sct">
            <div class="sct_left">
                <div class="sct_right">
                    <div class="sct_left">
                        <div class="sct_right">
                            <!--[if !IE]>start table_wrapper<![endif]-->
                            <div class="table_wrapper">
                                <div class="table_wrapper_inner">
                                <div id="container">
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->

                                    <script type="text/javascript" src="js/report-jquery.min.js"></script>
                                    <script type="text/javascript" src="js/highcharts.js"></script>
                                    <!--[if IE]>
                                        <script type="text/javascript" src="js/excanvas.compiled.js"></script>
                                    <![endif]-->
                                    <%
                                    java.sql.Connection connection = (java.sql.Connection)application.getAttribute("APP_CONN");
                                    java.util.ArrayList<org.nvdung.bean.StatisticService> al = (new org.nvdung.db.SqlStatistic(connection)).getServiceByYear(year,status);
                                    %>
                                    <!-- 2. Add the JavaScript to initialize the chart on document ready -->
                                    <script type="text/javascript">
                                    $(document).ready(function() {
                                            var chart = new Highcharts.Chart({
                                                    chart: {
                                                            renderTo: 'container1',
                                                            margin: [50, 200, 60, 170]
                                                    },
                                                    title: {
                                                            text: 'Services market shares in year <%=year %>'
                                                    },
                                                    plotArea: {
                                                            shadow: null,
                                                            borderWidth: null,
                                                            backgroundColor: null
                                                    },
                                                    tooltip: {
                                                            formatter: function() {
                                                                    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                                            }
                                                    },
                                                    plotOptions: {
                                                            pie: {
                                                                    dataLabels: {
                                                                            enabled: true,
                                                                            formatter: function() {
                                                                                    if (this.y > 5) return this.point.name;
                                                                            },
                                                                            color: 'white',
                                                                            style: {
                                                                                    font: '13px Trebuchet MS, Verdana, sans-serif'
                                                                            }
                                                                    }
                                                            }
                                                    },
                                                    legend: {
                                                            layout: 'vertical',
                                                            style: {
                                                                    left: 'auto',
                                                                    bottom: 'auto',
                                                                    right: '50px',
                                                                    top: '100px'
                                                            }
                                                    },
                                                    series: [{
                                                            type: 'pie',
                                                            name: 'Service share',
                                                            data: [
                                                                <% int total = 0; for(int i=0;i<al.size();i++) total+=al.get(i).getCountSale(); %>
                                                                <% for(int i=0;i<al.size();i++) { %>
                                                                    { name: '<%=al.get(i).getServiceName() %> (<%=al.get(i).getCountSale() %> Order)', y: <% double d = al.get(i).getCountSale(); %> <%=(d/total)*100 %> },
                                                                <% } %>
                                                            ]
                                                    }]
                                            });


                                    });
                                    </script>



                                    <div id="container1" style="width: 100%; margin: 0 auto"></div>


                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                    <!------------------------------------------------->
                                </div>
                                </div>
                            </div>
                            <!--[if !IE]>end table_wrapper<![endif]-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--[if !IE]>end section content top<![endif]-->
        <!--[if !IE]>start section content bottom<![endif]-->
        <span class="scb"><span class="scb_left"></span><span class="scb_right"></span></span>
        <!--[if !IE]>end section content bottom<![endif]-->
    </div>
    <!--[if !IE]>end section content<![endif]-->
</div>